<template>
	<div style="display: flex; justify-content: space-between; position: relative;">
		<h2>课程显示</h2>
		<h2><button @click="go2add()">添加课程</button></h2>
	</div>
	<div style="display: flex">
		<div style="width: 90%; border: blue 1px solid">
			<h2 style="text-align: center">课程显示</h2>
			<table border="1" style="width: 100%">
				<tr>
					<th>课程编号</th>
					<th>课程名称</th>
					<th>操作</th>
				</tr>
				<tr v-for="x, idx in courses" @click="go2update(x)" :class="{ c: course.cno == x.cno }">
					<th>{{ x.cno }}</th>
					<th>{{ x.cname }}</th>
					<th><button @click="del(x.cno)">删除</button></th>
				</tr>
			</table>
			{{ dodel }}
		</div>
		<dialog v-bind:open="addup" class="modal-backdrop">
			<table border="1px">
				<tr>
					<td>课程编号：</td>
					<td>
						<input type="text" v-model="course.cno" v-show="actidx == 1" />
						<input type="text" v-model="course.cno" v-show="actidx == 0" readonly />
					</td>
				</tr>
				<tr>
					<td>课程名称：</td>
					<td><input type="text" v-model="course.cname" /></td>
				</tr>
			</table>
			<div style="display: flex; justify-content: space-between;">
				<button @click="addupdate()">确认</button>
				<button @click="cancel()">取消</button>
			</div>
		</dialog>
	</div>
</template>

<script>
export default {
	name: "Course",
	data() {
		return {
			courses: [],//课程数组
			course: { cno: "", cname: "" },//课程对象
			actidx: 0,//属性改为添加或修改
			token: "",//token
			dodel: "",//删除信息
			addup: false//模态框
		};
	},
	methods: {
		del(cno) {//删除课程
			this.$axios.get(this.$ip + "/api/adm/course/del?cno=" + cno, { headers: { 'Authorization': this.token } })
				.then((resp) => {
					this.courses = resp.data.data;
					this.dodel = resp.data.msg;
					console.log(resp.data.data);
				})
				.catch((error) => {
					console.error("删除课程:", error);
					alert("删除课程失败");
				});
		},
		go2add() {//添加课程
			this.addup = true;//模态框
			this.actidx = 1;//属性改为添加
			this.course = { cno: "", cname: "" };//初始化对象
		},
		go2update(course) {//修改课程
			this.actidx = 0;
			this.addup = true;
			this.$axios.get(this.$ip + "/api/adm/course/findOne/" + course.cno, { headers: { 'Authorization': this.token } })
				.then((resp) => {
					this.course = resp.data.data;
					console.log(resp.data.data);
				})
				.catch((error) => {
					console.error("查询课程:", error);
					alert("查询课程失败");
				});
		},
		addupdate() {//添加或更新课程
			if (!this.course.cno || !this.course.cname) {
				alert("课程编号和名称不允许为空");
				return;
			}

			let url =// 根据actidx判断是添加还是修改
				this.actidx > 0 ? this.$ip + "/api/adm/course/add" : this.$ip + "/api/adm/course/update";

			this.$axios.post(url, this.course, { headers: { 'Authorization': this.token } })
				.then((resp) => {
					this.courses = resp.data.data;
					this.dodel = resp.data.msg;
					this.addup = false;
					console.log(resp.data.data);
				})
				.catch((error) => {
					console.error("添加或更新课程:", error);
					alert("添加或更新课程失败");
				});
		},
		cancel() {
			this.addup = false;
		}
	},
	mounted() {//获取课程列表
		this.token = window.localStorage.getItem("token");
		console.log(this.token);

		this.$axios.get(this.$ip + "/api/public/getCourses")
			.then((resp) => {
				this.courses = resp.data.data;
				console.log(resp.data.data);
			})
			.catch((error) => {
				console.error("获取课程列表:", error);
				alert("获取课程列表失败");
			});
	}
}
</script>

<style>
 /* 设置高亮  */
.c {
	color: rgb(0, 195, 255);
	background: rgb(252, 11, 252);
}

/* 模态框样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>